<template>
  <div class="bg">
    <div id="center">
      <h1 id="h1">注册账号</h1>
      <div class="input-group">
        <span id="span_username">邮箱：</span>
        <input
          class="form-control"
          id="username"
          name="username"
          type="text"
          v-model="email"
          placeholder="请输入邮箱"
          autocomplete="off"
          @blur="checkEmail"
        />
      </div>

      <div class="input-group">
        <span id="span_password">密码：</span>
        <input
          class="form-control"
          id="password"
          name="password"
          type="password"
          v-model="password1"
          placeholder="密码必须由数字、字母两种字符组成,长度在8-15位之间"
          autocomplete="off"
          @blur="checkPassword1"
        />
      </div>
      <div class="input-group">
        <span id="span_password2">确认密码：</span>
        <input
          class="form-control"
          id="password2"
          name="password2"
          type="password"
          v-model="password2"
          placeholder="请确认密码"
          autocomplete="off"
          @blur="checkPassword2"
        />
      </div>

      <div class="input-group">
        <span id="yzm">验证码：</span>
        <input
          class="form-control"
          id="yzm2"
          name="password2"
          type="password"
          v-model="yzm"
          placeholder="请输入验证码"
          autocomplete="off"
          @blur="checkYzm"
        />

        <img :src="imgData" alt="验证码" @click="getCode" width="160px" />

        <div id="btn_div">
          <input
            name="registerButton"
            class="btn btn-primary"
            type="button"
            id="register"
            value="注册"
            @click="regist"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from '../../router';
export default {
  data() {
    return {
      email: "",
      password1: "",
      password2: "",
      yzm: "",
      src: "",
      imgData: "",
      count:''
    };
  },
  mounted() {
    this.getCode();
  },
   
  methods: {
    //验证邮箱格式
    checkEmail() {
      var newEamil = this.email;
      var emailPatt =
        /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
      if ("" == newEamil) {
        this.$message.error("请输入邮箱");
        return;
      } else if (!emailPatt.test(newEamil)) {
        this.$message.error("邮箱格式不正确，请检查输入");
        return;
      } else {
        this.$message({
          message: "邮箱输入成功",
          type: "success",
        });
      }
    },
    //验证密码：必须由字母，数字下划线组成，并且长度为5到12位
    checkPassword1() {
      var newPass = this.password1;
      if (newPass == "") {
        this.$message.error("请输入密码");
        return;
      } else {
        var passPatt = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/;
        if (!passPatt.test(newPass)) {
          this.value = "";
          this.$message.error(
            "密码必须由数字、字母两种字符组成,长度在8-15位之间"
          );
          return false;
        }
        this.password1 = newPass;
        this.$message({
          message: "密码输入成功",
          type: "success",
        });
      }
    },
    //验证密码：两次输入需要一致
    checkPassword2() {
      var oldPass = this.password1;
      var newPass = this.password2;
      if (oldPass != newPass || newPass == "") {
        this.password2 = "";
        this.$message.error("两次密码不一致请重新输入");
        return;
      }
      this.$message({
        message: "密码设置成功",
        type: "success",
      });
    },
    //验证验证码：验证码不能为空,验证码去后台比对
    checkYzm() {
      var yzm = this.yzm;
      if (yzm == "") {
        this.value = "";
        this.$message.error("请输入验证码");
        return false;
      }
      this.$axios
        .get("/send_code", { params: { captcha: yzm } })
        .then((res) => {
          if (res.data.code == 200 && res.data.extend.result == "验证成功") {
            this.$message({
              message: "验证码输入成功",
              type: "success",
            });
            return;
          } else if (
            res.data.code == 400 &&
            res.data.extend.result == "验证码错误，请重新输入"
          ) {
            this.$message.error("验证码错误，请重新输入");
            this.yzm = "";
            return;
          }
        });
    },
    //获取验证码
    getCode() {
      this.$axios.get("/captcha").then((res) => {
        this.imgData = res.data.extend.result;
      });
    },
    //提交注册表单
    regist() {
      let user = { email: this.email, password: this.password1 };
      this.$axios.post("/regist", user).then((res) => {
        if (
          res.data.code == 400 &&
          res.data.extend.result == "该用户已存在，请直接登录"
        ) {
          this.$message.error("该用户已存在，请直接登录");
        } else if (
          res.data.code == 400 &&
          res.data.extend.errorFields.email == "必须为合法的邮箱地址"
        ) {
          this.$message.error("必须为合法的邮箱地址");
        } else if (
          res.data.code == 400 &&
          res.data.extend.errorFields.password ==
            "密码必须由数字、字母两种字符组成,长度在8-15位之间"
        ) {
          this.$message.error(
            "密码必须由数字、字母两种字符组成,长度在8-15位之间"
          );
        } else if (res.data.code == 200) {
          this.$message({
            message: "注册成功,三秒后跳转到邮箱登录页面",
            type: "success",
          });
            this.countDown() // 倒计时
        }
      });
    },
    //倒计时三秒跳转到邮箱登录页面
     countDown() {
      const TIME_COUNT = 3
      if (!this.timer) {
        this.count = TIME_COUNT
        this.timer = setInterval(() => {
          if (this.count > 1 && this.count <= TIME_COUNT) { //限制倒计时区间
            this.count--
          } else {
            clearInterval(this.timer)   //删除定时器
            this.timer = null
            //跳转的页面写在此处
            router.push("./loginemail");
          }
        }, 1000)
      }
    },
  },
};
</script>


<style scoped>
@import "../../assets/css/bootstrap.min.css";

@import "../../assets/css/message.min.css";
@import "../../assets/css/register.css";

* {
  margin: 0;
  padding: 0;
}
.bg {
  background: url("../../assets/img/bg.png") no-repeat;
  background-size: cover;
  /* background-color: aqua; */
  height: 100vh;
}
</style>